import React from "react";
import { Button, Drawer, Icon, Row, Col, Spin, Empty, List } from 'antd';
import { connect } from 'dva';
import styles from '../../KnowledgeManagement/Overview/editQa/index.less';
import EditingKnowledge from '@/pages/KnowledgeManagement/Overview/EditingKnowledge/editingKnowledge';

const EditQa = React.lazy(() => import('../../KnowledgeManagement/Overview/editQa'));

@connect(({ customApi, loading }) => ({
  customApi,
  loading: loading.effects['customApi/apiUseConditions'],
}))
class ApiServiceCondition extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      qaUseApiData: null,
      qaLoading: true,
      qaPage: 1,
      editAnswerHidden: false,
      qaId: ''
    };
  }

  componentDidUpdate(prevProps) {
    // 典型用法（不要忘记比较 props）：
    if (this.props.id !== prevProps.id) {
      this.fetchApiUseDetail(this.props.id)
    }
  }

  showDrawer = () => {
    this.setState({ visible: true });
  };

  onClose = () => {
    this.setState({ visible: false }, () => {
      this.props.onClosed();
    });
  };

  getApiUseInfoByQa = (id) => {
    const { dispatch } = this.props;
    const { qaPage } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'customApi/getApiUseInfoByQa',
        payload: { id, size: 10, current: qaPage },
        callback: (res) => {
          // console.log(res);
          this.setState({ qaUseApiData: res, qaLoading: false })
        }
      })
    })
  };

  fetchApiUseDetail = (id) => {
    if (!id) {
      return false
    };
    this.setState({ qaPage: 1 }, () => this.getApiUseInfoByQa(id))
  };

  fenye = (e) => {
    this.setState({ qaPage: e }, () => {
      this.getApiUseInfoByQa(this.props.id)
    })
  };

  editAnswer = (item) => {
    // this.setState({ qaId: id, editAnswerHidden: true });
    this.EditingKnowledge.showEditDrawer(item, null, null);
  };

  onEditAnswerDrawerClose = () => {
    this.setState({ editAnswerHidden: false })
  };

  onCloseEditAnswerDrawer = () => {
    this.setState({ editAnswerHidden: false, qaId: '' });
  };

  refreshList = () => {
    this.getApiUseInfoByQa(this.props.id);
  }

  render() {
    const { visible, title } = this.props;
    const { qaUseApiData, qaLoading, qaPage } = this.state;

    return (
      <div>
        <Drawer
          closable
          width="600"
          title={<div><Icon type="book" theme="twoTone" /><span style={{ marginLeft: 10 }}>API使用情况</span></div>}
          placement="right"
          onClose={this.onClose}
          visible={visible}
        >
          <div style={{ marginTop: 20 }}>
            <div className={styles.label}>正在使用API的知识点</div>
            <div className={styles.labelWarp}>
              {
                qaUseApiData ? (
                  <List
                    size="small"
                    header=''
                    footer=''
                    dataSource={qaUseApiData.records}
                    loading={qaLoading}
                    pagination={{
                      onChange: page => {
                        this.fenye(page)
                      },
                      current: qaPage,
                      pageSize: 10,
                      total: parseInt(qaUseApiData.total),
                      showQuickJumper: true,
                    }}
                    renderItem={item => (
                      <List.Item>
                        <Row style={{ lineHeight: '37px', marginBottom: 16, width: '100%' }}>
                          <Col span={8}>
                            <div>{item.type}</div>
                          </Col>
                          <Col span={16}>
                            <div style={{ backgroundColor: "rgb(248, 249, 254)", color: "#222", borderRadius: 30, paddingLeft: 10, marginTop: 0, cursor: "pointer" }}>{item.name}</div>
                          </Col>
                        </Row>
                      </List.Item>
                    )}
                  />
                ) : <Empty />
              }
            </div>
          </div>
          <EditingKnowledge
            onRef={ref => this.EditingKnowledge = ref}
            refreshList={this.refreshList}
            categoryId={null}
            authority={2}
          />
        </Drawer>

      </div>
    );
  }
}

export default ApiServiceCondition;
